<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
<style type="text/css">
	.none{
		display: none;
	}
	.blur2{
		position: fixed;
		z-index: 100;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: url(images/bg3.png);
		background-size: 100%;
		
	}
	.blur2 a{
		display: block;
		position: absolute;
		bottom: 7rem;
		left: 50%;
		font-size: 2rem;
		text-align: center;
		transform: translateX(-50%);
	}
	.blur1{
		position: fixed;
		z-index: 100;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: url(images/bg1.png);
		background-size: 100%;
	}
	.blur1 a{
		width: 15rem;
		height: auto;
		display: block;
		position: absolute;
		bottom: 3rem;
		left: 50%;
		transform: translateX(-50%);
	}
	.blur1 a img{
		width: 100%;
	}
	#app{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: url(images/bg2.png);
		background-size: 100%;
	}
	ul{
		list-style: none;
		display: block;
		background: #e1e1e1;
		border: .1rem solid #555;
		width: 15rem;
		height: 15rem;
		padding: 0;
		margin-left: 5rem;
		margin-top: 5rem;
	}
	ul li{
		border: .1rem solid #555;
		width: 4.8rem;
		height: 4.8rem;
		background: #fff;
		float: left;
		display: block;
		margin: 0;
	}
	.blue{
		background-color: rgb(0, 160, 233);
		box-shadow: inset 0px 4px 48.6px 5.4px rgba(5, 105, 151, 0.89);
	}
	.red{
		background-color: rgb(255, 190, 190);
		box-shadow: inset 0px 4px 54px 0px rgba(255, 0, 0, 0.48);
	}
</style>
<div id="app">
	<div @click="blur" ref="blur" id="blur1" class="blur1">
		<a><img src="images/anniu1.png" ></a>
	</div>
	<div @click="wins" ref="wins" id="blur2" class="blur2" style="display: none;">
		<a v-html="winner"></a>
	</div>
	<ul>
		<li v-for="(item,index) in item" @click="a(index)" :class="item.Bgcolor"></li>
	</ul>
</div>
<script type="text/javascript">
	var Vm = new Vue({
		el:'#app',
		data:{
			step:0,
			red:[0,0,0,0,0],
			blue:[0,0,0,0,0],
			winner:"aaa",
			win:["1,2,3","4,5,6","7,8,9","1,4,7","2,5,8","3,6,7","1,5,9","3,5,7"],
			item:[{
				id:1,
				Bgcolor:"aaa",
			},{
				id:2,
				Bgcolor:"aaa",
			},{
				id:3,
				Bgcolor:"aaa",
			},{
				id:4,
				Bgcolor:"aaa",
			},{
				id:5,
				Bgcolor:"aaa",
			},{
				id:6,
				Bgcolor:"aaa",
			},{
				id:7,
				Bgcolor:"aaa",
			},{
				id:8,
				Bgcolor:"aaa",
			},{
				id:9,
				Bgcolor:"aaa",
			}]
		},
		
		methods:{
			a:function(a){
				if(this.item[a].Bgcolor == "aaa"){
					this.step++
					if(this.step%2 == 1){
						Vue.set(this.item, a,{
							id:this.step,
							Bgcolor:"red"
						})
						Vue.set(this.red,0,a+1)
						this.red.sort()
					}else{
						Vue.set(this.item, a,{
							id:this.step,
							Bgcolor:"blue"
						})
						Vue.set(this.blue,0,a+1)
						this.blue.sort()
					}
					this.bbbbb(a)
				}
			},
			bbbbb:function(a){
				if(this.step>4){
					for(i=0;i<this.win.length;i++){
						var aa = this.win[i].toString()
						var red = this.red.toString()
						var blue = this.blue.toString()
						if(red.indexOf(aa)!=-1){
							this.$refs.wins.style.display = "block"
							this.winner = "恭喜<b style='color:red;'>红队</b>胜利"
						}
						if(blue.indexOf(aa)!=-1){
							this.$refs.wins.style.display = "block"
							this.winner = "恭喜<b style='color:blue;'>蓝队</b>胜利"
						}
					}
				}
			},
			blur:function(){
				this.$refs.blur.className = "none"
			},
			wins:function(){
				this.$refs.wins.style.display = "none"
			}
		}
	})
</script>

	</body>
</html>







